<script lang="ts" setup>
	import { ref, reactive, inject, toRefs } from "vue";
	import {
		onLoad,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let jusnList = ref([])
	onLoad(() => {
		// uni.showLoading({})
		getJuan()
	})
	onUnload(() => {
		// uni.hideLoading()
	})
	onReachBottom(() => {
		pageNum.value++
		getJuan()
	})
	let pageNum = ref(1)
	let juanStatus = ref(0)
	let juanList = ref([])
	let tabList = ref([{
		name: '未使用',
	}, {
		name: '已使用',
	}, {
		name: '已过期',
	}])
	const tabsClick = (e : any) : void => {
		console.log(e);
		juanStatus.value = e.index
		pageNum.value = 1
		juanList.value = []
		getJuan()
	}
	const getJuan = () => {
		//获取我名下的卷	
		//状态（0：未使用，1：已使用, 2:已过期）
		proxy.$req('POST', proxy.$api.xiadanJuan, {
			status: juanStatus.value,
			pageNo: pageNum.value,
			pageSize: 30
		}).then((res) => {
			console.log(res);
			uni.$u.toast(res.message)
			if (res.success) {
				juanList.value = juanList.value.concat(res.result.records)
			}
		})
	}
	const useJuan = (e) => {
		//options.data
		//店铺id  postObj.value.meiyeSupplier.id
		//商品类型   postObj.value.isType
		//店铺简介   postObj.meiyeSupplier.storeDescription
		//店铺名 postObj.meiyeSupplier.storeName
		let data = {
			meiyeSupplier: {
				id: e.storeId,
				storeDescription: '',
				storeName: e.storeName
			},
			isType: 0,
		}
		router.push({
			name: 'goodsBusiness',
			params: {
				data: JSON.stringify(data)
			}
		})
		console.log(e);
	}
</script>
<template>
	<view class="tabs">
		<u-tabs :list="tabList" :activeStyle="{
			width:'200rpx',
			textAlign:'center',
	    color: '#CB645E',
	    fontWeight: 'bold',
	    transform: 'scale(1.05)'
	}" :inactiveStyle="{
		textAlign:'center',
		width:'200rpx',
	    color: '#000',
	    transform: 'scale(1)'
	}" lineColor="#CB645E" @click="tabsClick"></u-tabs>
	</view>
	<view style="border-radius: 24rpx 24rpx 0rpx 0rpx;padding: 0 32rpx;">
		<!-- <view class="r-flex-between-center" style="height: 110rpx;">
			<text> </text>
			<text style="font-size: 36rpx;font-weight: 500;">优惠卷</text>
			<u-icon name="close" @click="youhuiShow=false"></u-icon>
		</view> -->
		<view class="youhuijuan r-flex-center-center" v-for="(item,index) in juanList" :key="index">
			<view class="left c-flex-center-center">
				<view>
					<text style="font-size: 42rpx;font-weight: bold;color: #FFFFFF;margin-right: 6rpx;">￥</text>
					<text style="font-size: 80rpx;font-weight: bold;color: #FFFFFF;">{{ item.couponPrice }}</text>
				</view>
				<text style="font-size: 24rpx;font-weight: 400;color: #FFFFFF;">{{ item.storeName }}</text>
			</view>
			<view class="right">
				<view class="rt">
					<text>限该店内使用</text>
					<text>{{ item.couponTitle }}</text>
				</view>
				<view class="rb r-flex-between-center">
					<view class="rb1">
						有效期至<br />
						{{ item.endTime }}
					</view>
					<view class="rb2" @click="useJuan(item)" v-if="item.status==0">
						使用
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="" style="margin-top: 150rpx;" v-if="juanList.length < 1">
		<u-empty mode="coupon">
		</u-empty>
	</view>
</template>
<style lang="scss">
	.youhuijuan {
		width: 686rpx;
		height: 224rpx;
		background-color: #fff;
		border: 2rpx solid rgba(203, 100, 94, 0.24);
		border-radius: 24rpx;
		margin: 16rpx auto;
		border-left: none;

		.left {
			width: 258rpx;
			height: 100%;
			background-image: url('../../../static/images/juan.png');
		}

		.right {
			width: 364rpx;
			height: 100%;
			padding: 0 32rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.rt {
				margin-top: 32rpx;
				margin-bottom: 58rpx;

				text:nth-child(1) {
					display: inline-block;
					width: 152rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: linear-gradient(270deg, #FFF1EE 0%, #FEEFF1 47%, #FEEAF6 100%);
					border-radius: 20rpx;
					font-size: 20rpx;
					font-weight: 600;
					color: #F22F19;
					margin-right: 16rpx;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}
			}

			.rb {
				.rb1 {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
					line-height: 1.5;
				}

				.rb2 {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #CB645E;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}

	.tabs {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
	}
</style>